<template>
    <div class="tabbar">
    <div v-for="(item, index) in tabberList" :key="index" :class="{'tabbar_item': true, 'tabbar_item-active': show==index}" @click="goPage(index)">
      <span class="iconfont" v-html="item.icon"></span><span class="title">{{item.title}}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../../assets/style/public.scss';
.tabbar {
  box-sizing: $box-sizing;
  width: 100%;
  height: .49rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #FFFFFF;
  box-shadow: 0 -1px 1px 0 $border-bottom;
  display: flex;
  &_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .iconfont {
      font-size: 0.2rem;
      margin-bottom: 0.02rem;
    }
    .title {
      font-size: 0.12rem;
    }
  }
  &_item-active {
    color: #1fa4fc;
  }
}
</style>

<script>
import { useRouter } from 'vue-router'
export default {
  name: 'Tabber',
  props: ['show'],
  setup (props) {
    const router = useRouter()
    const tabberList = [
      { icon: '&#xe609;', title: '首页' },
      { icon: '&#xe600;', title: '购物车' },
      { icon: '&#xe669;', title: '订单' },
      { icon: '&#xe608;', title: '我的' }
    ]

    const goPage = index => {
      switch (index) {
        case 0: router.push({ name: 'Home' }); break
        case 1: router.push({ name: 'SpgCart' }); break
        case 2: router.push({ name: 'MyOrder' }); break
        case 3: router.push({ name: 'My' }); break
      }
    }
    return { tabberList, goPage }
  }
}
</script>
